<template>
  <!-- 图文列表 -->
  <div class="graphic-item"  @click.stop="imgHandler()" @mouseenter="enter(item.id)" @mouseleave="leave(item.id)">
    <!-- 图片 -->
    <div>
    <div class="graphic-img" @click.stop="jump(item.id)">
      <img  v-lazy="item.skuImage" :key="item.skuImage">
      <!-- 查看商品和加入收藏 --> 
      <div class="graphic-jump" v-if="item.isFlag">
        <div class="jump-query" @click.stop="queryCommodity(item.id)">查看商品</div>
        <div class="jump-line"></div>
        <div class="jump-collect" @click.stop="joinCollect()">{{item.collection ? '取消收藏' :'加入收藏'}}</div>
      </div>
      <!-- 淘宝京东点赞红包 -->
      <!-- <div class="hot-tags-list">
        <template v-if="!item.isFlag">
          <div class="hot-tags-item" v-for="(v,i) in item.tags" :key="v.id" :class="typeBg(i)" >
            <img :src="v.tagIcon" alt="加载中..." >
          </div>
        </template>
        <template  v-if="item.isFlag">
          <div class="hot-tags-item" v-for="(v,i) in item.tags" :key="v.id" :class="typeBg(i)">
            {{v.tagName}}
          </div>
        </template>
      </div> -->
    </div>
    </div>
    <!-- 文字简介 -->
    <div class="graphic-brief">
      <h4 class="line3" :title="item.skuName">{{item.skuName}}</h4>
      <div class="graphic-dashed"></div>
      <!-- 价格和销量 -->
      <div class="graphic-calc">
        <!-- 左边 -->
        <div class="graphic-left">
          <p class="price">
            <span>￥</span>
            <span>{{item.price}}</span>
          </p>
          <p class="discount-price">优惠价</p>
        </div>
        <div class="middle-line"></div>
        <!-- 右边 -->
        <div class="graphic-right">
          <p class="price">
            {{item.monthVolume}}  
            <!-- <span>w</span> -->
          </p>
          <p class="sell-count">销量</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object,
      default: ()=>{
        return {}
      },
    },
    // index:{
    //   type:Number,
    //   default:0
    // }
  },
  data () {
    return {
      // 是否加入收藏
      isJoinCollect:false,
      // 用户Id
      userId:null,
      // 商品Id
      goodsId:0,
    }
  },
  mounted() {
    this.userId = localStorage.getItem('userid');
    this.goodsId = this.item.id;
  },
  methods:{
    //鼠标移入
    enter(id){
      this.item.isFlag = true
    },
    //鼠标移出
    leave(id){
      this.item.isFlag = false
    },
    //点击图片
    imgHandler(){
      // console.log(this.index)
    },
    //跳转到商品详情页
    jump(id){
      // console.log("跳转到商品详情页",this.index)
      // 未来传递商品ID过去
      this.$router.push({
        path:"/hotDetail",
        query:{id:id}
      })
    },
    //查看商品
    queryCommodity(id){
      console.log("查看商品")
      this.$router.push({
        path:'/hotDetail',
        query:{id:id}
      })
    },
    //加入收藏
    joinCollect() {
      this.item.collection = !this.item.collection;
      if(this.item.collection){
        this.joinCollectInterface();
        console.log("加入")
      } else {
        this.cancelCollectInterface();
        console.log("取消")
      }
      this.$emit('sendJoinCollect')
    },
     // 加入收藏接口 false为加入收藏字样 实际已取消了收藏,true为取消收藏字样，实际为加入了收藏
    joinCollectInterface() {
      let params = {
        goodsId:this.goodsId,
        userid:this.userId,
      }
      this.loading = true;
      this.$axios.$post('HotJoinCollect',params).then(res => {
        this.loading = false;
        if(res.status === 200){
          // this.isJoinCollect = res.obj;
          this.item.collection = true;
        }else{
          // this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        // this.$message.warning('请求失败');
        this.loading = false;
      })
    },
    cancelCollectInterface() {
      let params = {
        goodsId:this.goodsId,
        userid:this.userId,
      }
      this.loading = true;
      this.$axios.$post('HotcancelCollect',params).then(res => {
        this.loading = false;
        if(res.status === 200){
          // this.isJoinCollect = res.obj;
          this.item.collection = false;
        }else{
          // this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        // this.$message.warning('请求失败');
        this.loading = false;
      })
    }
  },
  computed:{
    // typeBg(){
    //   return function(type){
    //     return {
    //       'hot-tags-bg-gradient1' :type === 0,
    //       'hot-tags-bg-gradient2' :type === 1,
    //       'hot-tags-bg-gradient3' :type === 2,
    //       'hot-tags-bg-gradient4' :type === 3,
    //     }
    //   }
    // }
  },
}
</script>

<style scoped>
/* 图文列表 */
.graphic-item{
  width:calc(20% - 30px);
  margin-top:30px;
  margin-right:30px;
  border-radius:4px;
  flex-shrink:0;
  background-color: #21232e;
}
.graphic-item:hover{
  width:calc(20% - 32px);
  border: 1px solid #0096e6;
}
@media screen and (max-width:1440px){
  .graphic-item{
    width:calc(25% - 30px);
  }
  .graphic-item:hover{
    width:calc(25% - 32px);
  }
}
/* 图片 */
.graphic-img{
  width:100%;
  height:265px;
  position:relative;
  cursor:pointer;
}
.graphic-img img{
  width:100%;
  height:100%;
  display:block;
  border-radius:4px 4px 0 0;
}
.graphic-jump{
  height:38px;
  line-height: 38px;
  background-image: linear-gradient(260deg,#009aff,#00ccff);
  display:flex;
  align-items: center;
  border-radius:20px 20px 0 0;
  text-align: center;
  font-size: 16px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  color:#ededed;
  user-select:none;
}
.graphic-jump .jump-query,
.graphic-jump .jump-collect{
  flex-basis:50%;
  cursor:pointer;
  transition:all .2s ease;
}
.graphic-jump .jump-query:hover,
.graphic-jump .jump-collect:hover{
  color:#ffffff;
  font-weight:500;
}
.graphic-jump .jump-line{
  width:1px;
  height:16px;
  background-color: #fff;
}
/* 淘宝京东点赞红包*/
.hot-tags-list{
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  width:100%;
  z-index:66;
}
.hot-tags-item{
  display:block;
  margin-top: 8px;
  height: 26px;;
  line-height: 26px;
  padding: 0 11px;
  font-size: 14px;
  color: #fff;
  border-radius: 13px 0 0 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  text-align: center;
}
.hot-tags-item img{
  width:22px;
  height: 17px;
  display:block;
}
.hot-tags-bg-gradient1{
  background-image: linear-gradient(to right,#6b7dfc,#48b2fc);
}
.hot-tags-bg-gradient2{
  background-image: linear-gradient(to right,#f96766,#fc9967);
}
.hot-tags-bg-gradient3{
  background-image: linear-gradient(to right,#f65772,#f279b8);
}
.hot-tags-bg-gradient4{
  background-image: linear-gradient(to right,#f9833e,#f9833e);
}
 /* 文字简介 */
.graphic-brief{
  padding: 0 12px;
}
.graphic-brief h4{
  padding-top: 35px;
  font-size: 14px;
  color:#f5f5f6;
  line-height:1.2;
}
.graphic-brief .graphic-dashed{
  height:53px;
  border-bottom:1px dashed #949599;
}
/* 价格和销量 */
.graphic-calc{
  display:flex;
  align-items:center;
  padding:30px 0;
  text-align: center;
}
.graphic-left{
  flex-grow:2;
  box-sizing:border-box;
  color:#f3420b;
}
.graphic-left p span:nth-child(1){
  font-size: 14px;
}
.graphic-left p span:nth-child(2){
  font-size: 18px;
  font-weight: bold;
}
.discount-price{
  padding-top:7px;
  font-size: 14px;
  color:#f5f5f6;
}
.graphic-calc{
  padding-top:30px;
}
.middle-line{
  height:25px;
  width:1px;
  background-color:#949599;
  display:flex;
  align-items:center;
  justify-content: center;
}
.graphic-right{
  color:#009bff;
  flex-grow:2;
}
.graphic-right .price{
  font-size: 18px;
  font-weight: bold;
}
.graphic-right .sell-count{
  padding-top:7px;
  font-size: 14px;
  color:#f5f5f6;
}
</style>
